<template>
  <!-- 招标合同协同审批单详情 -->
  <div class="tenderContractDetails">
    <CommonTitle titleName="招标合同协同审批单"></CommonTitle>
    <div class="contenForm">
      <el-form
        :inline="true"
        :model="state"
        class="demo-form-inline"
        :rules="rules"
        status-icon
        ref="formInlineRef"
      >
        <el-row class="row-bg" justify="space-between">
          <el-col :span="8" v-if="pageType === 'view'">
            <el-form-item label="审批单编号:" label-width="180">
              <el-input disabled v-model="state.businessId" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="pageType === 'view'">
            <el-form-item label="审批状态:" label-width="180">
              <el-select disabled v-model="state.auditStatus" placeholder="">
                <el-option label="" value="-" />
                <el-option
                  v-for="v in auditStatusOptions"
                  :key="v.value"
                  :label="v.label"
                  :value="v.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" v-if="pageType === 'view'">
						<el-form-item label="招标项目类别:" label-width="180">
							<el-select v-model="state.contractId" placeholder="">
								<el-option label="" value="-" />
							</el-select>
						</el-form-item>
						<el-button>查看审批流程</el-button>
					</el-col> -->
          <el-col :span="8">
            <el-form-item label="关联项目:" label-width="180">
              <el-select
                disabled
                v-model="state.projectMainName"
                placeholder=""
              >
                <el-option label="" value="-" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联招标任务:" label-width="180">
              <el-input
                disabled
                v-model="state.projectTaskName"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务来源:" label-width="180">
              <el-input
                v-model="state.taskSource"
                placeholder=""
                :disabled="pageType === 'view'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 招标方式 -->
            <el-form-item label="合同签约方式:" label-width="180">
              <el-select
                disabled
                v-model="state.tenderTypeExplain"
                placeholder=""
              >
                <el-option
                  v-for="v in selectionTypeOptions"
                  :key="v.value"
                  :label="v.label"
                  :value="v.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="合同结算方式:"
              label-width="180"
              prop="contractSettlementType"
            >
              <el-select
                :disabled="pageType === 'view'"
                v-model="state.contractSettlementType"
                placeholder=""
              >
                <el-option
                  v-for="v in contractSettlementTypeOptions"
                  :key="v.value"
                  :label="v.label"
                  :value="v.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="合同名称:"
              label-width="180"
              prop="contractName"
            >
              <el-input
                :disabled="pageType === 'view'"
                v-model="state.contractName"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同编号:" label-width="180" prop="contractId">
              <el-input disabled v-model="state.contractId" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约甲方:" label-width="180" prop="signPartyA">
              <el-input
                :disabled="pageType === 'view'"
                v-model="state.signPartyA"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约乙方:" label-width="180" prop="signPartyB">
              <el-input
                :disabled="pageType === 'view'"
                v-model="state.signPartyB"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="合同金额:"
              label-width="180"
              prop="contractAmount"
            >
              <el-input
                :disabled="pageType === 'view'"
                v-model="state.contractAmount"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务期限:" label-width="180" prop="value1">
              <!-- <el-input :disabled="pageType === 'view'" v-model="state.serviceStartTime" placeholder="" /> -->
              <!-- <el-input :disabled="pageType === 'view'" v-model="state.serviceEndTime" placeholder="" /> -->
              <el-date-picker
                v-model="state.value1"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                :disabled="pageType === 'view'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="质保期:"
              label-width="180"
              prop="warrantyExplain"
            >
              <el-input
                :disabled="pageType === 'view'"
                v-model="state.warrantyExplain"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="合约签订日期:"
              label-width="180"
              style="width: 100%"
              prop="signTime"
            >
              <el-date-picker
                :disabled="pageType === 'view'"
                v-model="state.signTime"
                type="date"
                size="large"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="合同内容:"
              label-width="180"
              prop="contractContent"
            >
              <el-input
                :disabled="pageType === 'view'"
                type="textarea"
                :rows="4"
                v-model="state.contractContent"
                placeholder="多行输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付方式:" label-width="180" prop="payExplain">
              <el-input
                :disabled="pageType === 'view'"
                type="textarea"
                :rows="4"
                v-model="state.payExplain"
                placeholder="多行输入"
              />
            </el-form-item>
            
          </el-col>
          
          <!-- 合同结算计划 -->
          <form-tabel ref="formtabelRef" :payList="state.payList"></form-tabel>

          <el-col :span="24">
            <el-form-item label="备注:" label-width="180">
              <el-input
                :disabled="pageType === 'view'"
                type="textarea"
                :rows="4"
                v-model="state.remark"
                placeholder="多行输入"
              />
            </el-form-item>
          </el-col>

          <div class="submitBth">
            <el-button
              @click="saveApplyContract"
              style="color: #fff"
              color="#D4AE85"
              v-if="pageType == 'edit'"
              >发起审批</el-button
            >
          </div>
        </el-row>
      </el-form>
    </div>

    <!-- 相关附件 -->
    <div class="card_box m-t40">
      <attachment-details
        :pageType="pageType"
        :tenderTaskId="tenderTaskId"
        :files="state.files"
        :businessId="state.businessId"
        :businessType="13"
      ></attachment-details>
    </div>

    <div class="title_ m-t40 m-b20">其他信息</div>
    <div class="other m-r20 d-flex">
      <div class="other_item d-flex">
        <div class="lebel">申请人</div>
        <div class="conetnt m-l10">{{ state.applyUserName }}</div>
      </div>
      <div class="other_item d-flex">
        <div class="lebel">申请部门</div>
        <div class="conetnt m-l10">{{ state.applyUserDeptName }}</div>
      </div>
      <div class="other_item d-flex">
        <div class="lebel">创建时间</div>
        <div class="conetnt m-l10">{{ state.createTime }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonTitle from '@/components/CommonTitle.vue'
import {
  ElForm,
  ElCol,
  ElRow,
  ElUpload,
  ElCheckbox,
  ElSelect,
  ElDatePicker,
  ElTable,
  ElMessage,
  ElMessageBox
} from 'element-plus'
import { ref, reactive, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import {
  contractSettlementTypeOptions,
  selectionTypeOptions,
  auditStatusOptions
} from '@/common/dict/dictCollect'
import { useRoute, useRouter } from 'vue-router'
import { approveApi } from '@/api/biddingProject'
import FormTabel from '@/views/tenderProjectManage/collaborativeApprovalManagement/components/FormTabel.vue'
import AttachmentDetails from '@/views/tenderProjectManage/collaborativeApprovalManagement/components/AttachmentDetails.vue'

const router = useRouter()
const route = useRoute()

const tenderTaskId = router.currentRoute.value.params.tenderTaskId
const pageType = route.query.pageType
console.log(tenderTaskId, pageType)
let state = reactive({
  payList: [],
  contractId: '',
  tenderTaskId: '',
  applyId: '',
  contractName: '',
  contractNumber: '',
  signPartyA: '',
  signPartyB: '',
  contractAmount: '',
  payExplain: '',
  serviceStartTime: '',
  serviceEndTime: '',
  warrantyExplain: '',
  signExplain: '',
  contractSettlementType: '',
  contractContent: '',
  remark: '',
  createTime: '',
  createUserId: '',
  workId: '',
  projectMainName: '',
  projectTaskName: '',
  projectTypeExplain: '',
  tenderTypeExplain: '',
  taskSource: '',
  applyUserName: '',
  form: {
    applyUserDeptName: '',
    settlementEndTime: '',
    settlementStartTime: '',
    status: '',
    term: '',
    payableAmount: ''
  },
  value1: [],
  value2: [],
  files: []
})

const rules = reactive({
  contractSettlementType: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请选择合同结算方式',
      trigger: ['change', 'blur']
    }
  ],
  contractContent: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入合同内容',
      trigger: 'blur'
    }
  ],
  contractName: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入合同名称',
      trigger: 'blur'
    }
  ],
  contractId: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入合同编号',
      trigger: 'change'
    }
  ],
  signPartyA: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入签约甲方',
      trigger: 'change'
    }
  ],
  signPartyB: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入签约乙方',
      trigger: 'change'
    }
  ],
  contractAmount: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入合同金额',
      trigger: 'change'
    }
  ],
  value1: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请选择服务期限',
      trigger: 'change'
    }
  ],
  warrantyExplain: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入质保期',
      trigger: 'change'
    }
  ],
  signTime: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请选择签订日期',
      trigger: 'change'
    }
  ],
  payExplain: [
    {
      required: pageType !== 'view' ? true : false,
      message: '请输入支付方式',
      trigger: 'change'
    }
  ]
})

const update = () => {}

const onSubmit = () => {}

const getApplyContractInfo = () => {
  approveApi
    .getApplyContractInfo({
      tenderTaskId,
      businessId: route.query.businessId
    })
    .then((res) => {
      if (res.code == 200) {
        // state = res.data
        for (let key in res.data) {
          if (res.data[key]) {
            state[key] = res.data[key]
          }
        }
        state.value1 = [state.serviceStartTime, state.serviceEndTime]
      }
    })
}

const formInlineRef = ref(null)
const formtabelRef = ref(null)
const saveApplyContract = () => {
  ElMessageBox.confirm('是否确认发起审批?', '提示', {
    confirmButtonText: '确认发送',
    cancelButtonText: '取消',
    type: 'warning',
    confirmButtonClass: 'ExitConfirmButton',
    cancelButtonClass: 'ExitCancelButton'
  }).then(() => {
    state.payList = formtabelRef.value.handelData()
    state.tenderTaskId = tenderTaskId
    formInlineRef.value.validate((valid, fields) => {
      if (valid) {
        approveApi.saveApplyContract(state).then((res) => {
          if (res.code == 200) {
            ElMessage.success('操作成功')
          }
        })
      }
    })
  })
}

onMounted(() => {
  getApplyContractInfo()
})
watch(
  () => state.value1,
  (value) => {
    if (value.length > 0) {
      state.serviceStartTime = value[0]
      state.serviceEndTime = value[1]
    }
  }
)
</script>
<style lang="scss" scoped>
.tenderContractDetails {
  .contenForm {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    padding: 32px 72px 32px 0;
    .el-form-item,
    .el-select {
      width: 100%;
    }
    .el-col {
      margin-bottom: 15px;
    }
  }
  .card_box {
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    padding: 40px 35px;
    .title {
      span {
        color: #f12527;
      }
      height: 16px;
      font-size: 16px;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #1a1a1a;
      line-height: 40px;
    }
    .selecAll {
      line-height: 40px;
    }
    .el-button {
      border: 1px solid #fc7018;
      border-radius: 20px;
      color: #fc7018;
      width: 114px;
      height: 40px;
    }

    .card_content {
      padding: 0 69px;
      .file-content-item {
        .button-download {
          width: 77px;
          height: 32px;
          background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
          border-radius: 4px;
          cursor: pointer;

          .icon {
            width: 18px;
            height: 18px;
          }
          span {
            color: #ffffff;
          }
        }
        .delete-icon {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }
    }
  }
  .other {
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    padding: 32px 72px;
    justify-content: space-between;
    .other_item {
      .lebel {
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 40px;
      }
      .conetnt {
        width: 300px;
        height: 40px;
        background: #f7f7fa;
        border-radius: 4px;
        line-height: 40px;
        padding-left: 20px;
      }
    }
  }
  .title_ {
    font-size: 16px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 24px;
  }
  :deep(.form_table) {
    margin-bottom: 40px;
    margin-left: 180px;
  }
  :deep(.el-date-editor) {
    height: 40px;
  }
  :deep(.el-input__wrapper) {
    width: 100%;
  }
  :deep(.el-input) {
    width: 100%;
  }
}
.submitBth {
  position: fixed;
  top: 90%;
  right: 60px;
}
</style>
